<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS执行代码的顺序</title>
</head>

<!--<body>-->
<!--    下面这个代码是执行不了的, 因为先执行 script 的代码-->
<!--    在获取名为 but1 的对象的时候没有在内存中找到对象,-->
<!--    所以 document.getElementById("but1") 返回的结果是null-->
<!--    报错为 Cannot set property 'onclick' of null-->
<!--    <script type="text/javascript">-->
<!--        document.getElementById("but1").onclick = function () {-->
<!--            alert("执行成功");-->
<!--        }-->
<!--    </script>-->
<!--    <input type="button" value="but1" id="but1"/>-->
<!--</body>-->
<!--解决方法:-->
<!--1. 将按钮放在 script 之前-->
<!--2. 在 body 中加入 onload 属性-->
<!--load 事件在页面全部事件加载完毕后发生-->

<!--改写-->
<body onload="ready()">

    <script type="text/javascript">
        function ready() {
            document.getElementById("but1").onclick = function () {
                alert("执行成功");
            }
        }
    </script>
    <input type="button" value="but1" id="but1"/>

</body>

</html>